<template>
  <div>
      <h2>Message 消息提示:常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒</h2>
      <el-button :plain="true" @click="open1">消息</el-button>
      <el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open4">错误</el-button>

      <hr>
      <h2>Notification 通知:悬浮出现在页面角落，显示全局的通知提醒消息</h2>
      <el-button
              plain
              @click="open11">
          成功
      </el-button>
      <el-button
              plain
              @click="open22">
          警告
      </el-button>
      <el-button
              plain
              @click="open33">
          消息
      </el-button>
      <el-button
              plain
              @click="open44">
          错误
      </el-button>

  </div>
</template>

<script>
export default {
    name: "MessageView",
    methods:{
        open1(){   //  消息  info
            this.$message("普通的info信息提示")
        },
        open2(){
            this.$message.success('这是成功信息提示')
        },
        open3(){
            this.$message({
                message: '恭喜你，这是一条警告消息',
                type: 'warning',
                showClose:true,  //  显示关闭按钮
                onClose:()=>{
                    console.log("信息提示结束")
                }
            })
        },
        open4(){
            this.$message.error('这是警告信息提示')
        },

        open11(){   //  Notification
            this.$notify({
                title: '成功',
                message: '这是一条成功的提示消息',
                type: 'success',
                position: 'bottom-right'
            });
        },
        open22(){
            this.$notify({
                title: '警告',
                message: '这是一条警告的提示消息',
                type: 'warning'
            });
        },
        open33(){
            this.$notify.info({
                title: '消息',
                message: '这是一条消息的提示消息'
            });
        },
        open44(){
            this.$notify.error({
                title: '错误',
                message: '这是一条错误的提示消息'
            });
        }

    }
}
</script>

<style scoped>

</style>